<template>

    <a-form ref="formRef" name="custom-validation" :model="formState" v-bind="layout" @finish="handleFinish">
        <a-row>
            <a-col :span="4">
                <a-form-item has-feedback label="客户姓名" name="cust_name">
                    <a-input allowClear v-model:value="formState.cust_name" />
                </a-form-item>
            </a-col>

            <a-col :span="4">
                <a-form-item has-feedback label="客户级别" name="cust_level">
                    <a-select allowClear v-model:value="formState.cust_level">
                        <a-select-option value="潜在客户">潜在客户</a-select-option>
                        <a-select-option value="初级客户">初级客户</a-select-option>
                        <a-select-option value="中级客户">中级客户</a-select-option>
                        <a-select-option value="高级客户">高级客户</a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>

            <a-col :span="4">
                <a-form-item has-feedback label="手机号码" name="mobile">
                    <a-input allowClear v-model:value="formState.mobile" />
                </a-form-item>
            </a-col>

            <a-col :span="4">
                <a-form-item has-feedback label="来源" name="source">
                    <a-select allowClear v-model:value="formState.source">
                        <a-select-option value="线上广告">线上广告</a-select-option>
                        <a-select-option value="社交媒体">社交媒体</a-select-option>
                        <a-select-option value="线下活动">线下活动</a-select-option>
                        <a-select-option value="转介绍">转介绍</a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :span="4">
                <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                    <a-button type="primary" html-type="submit">查询</a-button>
                    <!-- <a-button type="primary" style="margin-left: 10px" @click="handleAdd">新增</a-button> -->
                </a-form-item>
            </a-col>
        </a-row>

        <a-row>
            <a-col :span="24">
                <a-flex justify="flex-end">
                    <a-button type="primary" style="margin-left: 10px" @click="handleAdd">新增</a-button>
                </a-flex>
            </a-col>
        </a-row>
    </a-form>


    <a-row>
        <a-table size="small" style="width: 100%;" :columns="columns" :data-source="data">
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'name'">
                    <a>{{ text }}</a>
                </template>
                <template v-if="column.dataIndex === 'action'">
                    <a type="primary" @click="handleEdit(record)">编辑</a>
                    <a type="danger" @click="handleDelete(record)">删除</a>
                </template>
            </template>
        </a-table>
    </a-row>

    <a-row>
        <a-drawer v-model:open="open" class="custom-class" root-class-name="root-class-name" style="color: red"
            :title="addFormState.cust_id ? '编辑客户' : '新增客户'" placement="right">
            <a-form :rules="addRulesForm" ref="addFormRef" name="custom-validation" :model="addFormState"
                v-bind="layout"
                @finish="addFormState.cust_id ? handleEditFinish(addFormState) : handleAddFinish(addFormState)">
                <a-form-item has-feedback label="客户姓名" name="cust_name">
                    <a-input v-model:value="addFormState.cust_name" />
                </a-form-item>

                <a-form-item has-feedback label="客户级别" name="cust_level">
                    <a-select v-model:value="addFormState.cust_level">
                        <a-select-option value="潜在客户">潜在客户</a-select-option>
                        <a-select-option value="初级客户">初级客户</a-select-option>
                        <a-select-option value="中级客户">中级客户</a-select-option>
                        <a-select-option value="高级客户">高级客户</a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="性别" name="gender">
                    <a-select v-model:value="addFormState.gender">
                        <a-select-option value="男">男</a-select-option>
                        <a-select-option value="女">女</a-select-option>
                        <a-select-option value="未知">未知</a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="出生年月日" name="birthdate">
                    <a-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%"
                        v-model:value="addFormState.birthdate" />
                </a-form-item>

                <a-form-item has-feedback label="手机号码" name="mobile">
                    <a-input v-model:value="addFormState.mobile" />
                </a-form-item>

                <a-form-item has-feedback label="备用联系方式" name="alt_contact">
                    <a-input v-model:value="addFormState.alt_contact" />
                </a-form-item>
                <a-form-item has-feedback label="电子邮箱" name="email">
                    <a-input v-model:value="addFormState.email" />
                </a-form-item>

                <a-form-item has-feedback label="联系地址" name="address">
                    <a-input v-model:value="addFormState.address" />
                </a-form-item>

                <a-form-item has-feedback label="来源" name="source">
                    <a-select v-model:value="addFormState.source">
                        <a-select-option value="线上广告">线上广告</a-select-option>
                        <a-select-option value="社交媒体">社交媒体</a-select-option>
                        <a-select-option value="线下活动">线下活动</a-select-option>
                        <a-select-option value="转介绍">转介绍</a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item has-feedback label="备注" name="notes">
                    <a-textarea v-model:value="addFormState.notes" />
                </a-form-item>

                <a-form-item v-if="addFormState.cust_id" has-feedback label="是否公海客户" name="is_public_pool">
                    <a-switch checked-children="是" un-checked-children="否"
                        v-model:checked="addFormState.is_public_pool" />
                </a-form-item>

                <a-form-item has-feedback>
                    <a-col :span="24">
                        <a-flex justify="flex-end">
                            <a-button type="primary" style="margin-left: 10px" html-type="submit">保存</a-button>
                        </a-flex>
                    </a-col>
                </a-form-item>
            </a-form>
        </a-drawer>
    </a-row>
</template>
<script setup>
import { customer as service } from '@/api/modulesApi/customer';
import { message } from 'ant-design-vue'

const columns = [
    {
        title: '客户编号',
        dataIndex: 'cust_id',
        key: 'cust_id',
    },
    {
        title: '客户姓名',
        dataIndex: 'cust_name',
        key: 'cust_name',
    },

    {
        title: '客户级别',
        dataIndex: 'cust_level',
        key: 'cust_level',

    },
    {
        title: '客户性别',
        dataIndex: 'gender',
        key: 'gender',

    },
    {
        title: '出生年月日',
        dataIndex: 'birthdate',
        key: 'birthdate',

    },
    {
        title: '手机号码',
        dataIndex: 'mobile',
        key: 'mobile',

    },
    {
        title: '备注联系方式',
        dataIndex: 'alt_contact',
        key: 'alt_contact',

    },
    {
        title: '电子邮箱',
        dataIndex: 'email',
        key: 'email',

    },
    {
        title: '联系地址',
        dataIndex: 'address',
        key: 'address',

    },
    {
        title: '来源',
        dataIndex: 'source',
        key: 'source',

    },
    {
        title: '备注',
        dataIndex: 'notes',
        key: 'notes',

    },
    {
        title: '创建时间',
        dataIndex: 'create_time',
        key: 'create_time',

    },
    {
        title: '最近跟进时间',
        dataIndex: 'last_followup',
        key: 'last_followup',

    },
    {
        title: '是否公海客户',
        dataIndex: 'is_public_pool',
        key: 'is_public_pool',

    },

    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',

    },
];

const data = ref([]);

import { reactive, ref } from 'vue';

const formRef = ref();

const formState = reactive({
    cust_name: '',
    cust_level: '',
    mobile: '',
    source: '',
});

const getCustomerInfo = async () => {
    const res = await service.getCustList(formState)
    data.value = res.data
}

getCustomerInfo()
const open = ref(false);

const addFormState = reactive({
    cust_id: '',
    cust_name: '',
    gender: '',
    birthdate: '',
    mobile: '',
    alt_contact: '',
    email: '',
    address: '',
    source: '',
    notes: '',
    is_public_pool: '否',
});

const addFormRef = ref();

const addRulesForm = {
    gender: [{ required: true, message: '请选择性别' }],
    mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
    {
        validator: async (rule, value, callback) => {
            try {
                // 调用接口校验用户名是否可用
                const res = await service.checkPhoneUnique({ mobile: value, cust_id: addFormState.cust_id });
                if (!res.success) {
                    return Promise.reject("手机号已存在");
                } else {
                    return Promise.resolve();
                }
            } catch (error) {
                console.error("校验失败:", error);
                return Promise.reject("校验失败，请稍后重试");
            }
        }, trigger: 'blur'
    }
    ],
    source: [{ required: true, message: '请选择来源' }],
    cust_name: [{ required: true, message: '请输入客户姓名' }],
    notes: [],
};

const handleAdd = () => {
    addFormState.cust_name = '';
    addFormState.gender = '';
    addFormState.birthdate = '';
    addFormState.mobile = '';
    addFormState.alt_contact = '';
    addFormState.email = '';
    addFormState.address = '';
    addFormState.source = '';
    addFormState.notes = '';
    addFormState.cust_id = '';
    open.value = true;
};

const handleAddFinish = async (values) => {
    console.log(values, addFormState);
    let res = await service.addCustInfo(values)
    getCustomerInfo()
    addFormRef.value.resetFields();
    message.success('新增成功');
    open.value = false;
};

const handleEditFinish = async (values) => {
    console.log(values, addFormState);
    let res = await service.updateCustInfo(values)
    getCustomerInfo()
    addFormRef.value.resetFields();
    message.success('编辑成功');
    open.value = false;
};

const layout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 14 },
};

const handleFinish = (values) => {
    console.log(values, formState);
    getCustomerInfo()
};

const handleEdit = async (row) => {
    const res = await service.getUpdateInit({ cust_id: row.cust_id })
    addFormState.cust_id = res.data[0].cust_id;
    addFormState.cust_name = res.data[0].cust_name;
    addFormState.cust_level = res.data[0].cust_level;
    addFormState.gender = res.data[0].gender;
    addFormState.birthdate = res.data[0].birthdate;
    addFormState.mobile = res.data[0].mobile;
    addFormState.alt_contact = res.data[0].alt_contact;
    addFormState.email = res.data[0].email;
    addFormState.address = res.data[0].address;
    addFormState.source = res.data[0].source;
    addFormState.notes = res.data[0].notes;
    addFormState.is_public_pool = res.data[0].is_public_pool;
    open.value = true;
};

const handleDelete = async (row) => {
    let res = await service.deleteCustInfo({ cust_id: row.cust_id })
    getCustomerInfo()
};

</script>